/** 
 * 子页面容器
 */

import React from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import { dynamic } from '@shared/components/DynamicComponent';
import { Layout } from '@douyinfe/semi-ui';
import ContentNavs from './ContentNavs';
import { MainViewProps } from '.';

const Content: React.FC<MainViewProps> = ({ navStore }): JSX.Element => {
    const { routes } = navStore;
    return (
        <Layout.Content
            style={{
                padding: '24px',
                backgroundColor: 'var(--semi-color-bg-0)',
            }}
        >
            <ContentNavs navStore={navStore} />
            <Switch>
                <Route exact path="/" >
                    <Redirect to="/dashboard" />
                </Route>
                {
                    routes.map(item => {
                        return <Route key={item.path} path={item.path} exact={item.exact} component={dynamic(item.view)} />
                    })
                }
            </Switch>
        </Layout.Content>
    );
};

export default Content;
